<template>
  <div>
  <el-main>
    <el-col :xs="17" :sm="15" :md="20" :lg="24">
      <el-row :gutter="20">
        <el-col :span="8">
          <div class="grid-content"><img src="../imaage/zhiyin.png" class="img1">
            <center>
              <el-button type="text" @click="jump">证据指引</el-button>
            </center>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content "><img src="../imaage/54c1762a713753fd8473e02b2f8fdea.png" class="img">
            <center>
              <el-button type="text" @click="jump">信箱</el-button>
            </center>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content "><img src="../imaage/54c1762a713753fd8473e02b2f8fdea.png" class="img">
            <center>
              <el-button type="text" @click="hi">案例库</el-button>
            </center>
          </div>
        </el-col>
        <div></div>
        <el-col :span="8">
          <div class="grid-content "><img src="../imaage/54c1762a713753fd8473e02b2f8fdea.png" class="img">
            <center>
              <el-button type="text" @click="hi">办案手记</el-button>
            </center>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content "><img src="../imaage/54c1762a713753fd8473e02b2f8fdea.png" class="img">
            <center>
              <el-button type="text" @click="hi">我的通告</el-button>
            </center>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content "><img src="../imaage/54c1762a713753fd8473e02b2f8fdea.png" class="img">
            <center>
              <el-button type="text" @click="hi">问题讨论</el-button>
            </center>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="grid-content "><img src="../imaage/falv.png" class="img1">
            <center>
              <el-button type="text" @click="hi">法律查询</el-button>
            </center>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-main>
  <el-footer>
    <el-row :gutter="30">
      <el-col :span="6" style="text-align: center;">
        <div class="grid-content ">工作台</div>
      </el-col>
      <el-col :span="6" style="text-align: center;">
        <div class="grid-content ">应用库</div>
      </el-col>
      <el-col :span="6" style="text-align: center;">
        <div class="grid-content ">消息</div>
      </el-col>
      <el-col :span="6" style="text-align: center;">
        <div class="grid-content ">我</div>
      </el-col>
    </el-row>
  </el-footer>
</div>
</template>

<script>
  export default {
    data() {
      return {
        methods: {
          jump() {
            this.$router.push('/guidance/JpContentList')
          }
        }
      }
    }
  }
</script>

<style>
  .img1 {
    width: 100%;
  }

  .img {
    height: 50%;
    width: 100%;
  }

  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #aa0000;
  }

  .bg-purple {
    background: #aa0000;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
